<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
      width: 100px;
      height: 100px;
      margin: 100px;
      background-color: khaki;
      transform: skewX(30deg);
      /* transform: skewX(-30deg); */
      /* transform: skew(30deg, 30deg); */
    }
  </style>
  <body>

    <!-- TIP
        css 中通过给transform添加属性值skew(ax,ay)或skewX(ax)或skewY(ay)变换函数来实现元素斜切效果
        skewX(ax)：用于水平拉伸，使元素的每个点在水平方向上扭曲一定角度
        skewY(ay)：用于垂直拉伸，使元素的每个点在垂直方向上扭曲一定角度
        skew(ax,ay)：用于水平和垂直拉伸，使元素在水平和垂直方向上扭曲一定角度
        ax：表示一个角度，用来表示沿着横坐标扭曲元素的角度
        ay：表示一个角度，用来表示沿着纵坐标扭曲元素的角度 -->
    <div class="box"></div>
  </body>
</html>